<!--  -->
<template>
  <div id="mainPage">
    <!-- <div class="head">
      <div class="nav"></div>
      <div class="w15">
        <div class="logo"></div>
      </div>
      <div class="nav-text">
        美食城
      </div>
      <div class="text-center">
        <div class="searchWarp clearfix">
          <div class="searchType">
            <span>全部</span>
            <span class="m120px"> </span>
          </div>
          <input type="text" placeholder="请输入搜索内容" class="searchInput" />
          <div class="searchBtn">
            <i class="el-icon-search"></i>
            <span class="ml5px">搜索</span>
          </div>
          <ul class="headSearchTypeList" style="display: block;">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>

              <el-dropdown-menu
                slot="dropdown"
                style="width: 80px; text-align: center"
              >
                <el-dropdown-item>全部</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <li class="searchTypeItem"></li>
          </ul>
        </div>
      </div>

      <div class="user-w15">
        <div class="user-avatar">
          <span
            class="el-avatar el-avatar--circle"
            style="height: 50px; width: 50px; line-height: 50px;"
          >
            <img src="./img/defaultAvatar.jpg" alt="" />
          </span>
        </div>

        <div class="user-name">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              111 <i class="el-icon-arrow-down el-icon--right"></i>
            </span>

            <el-dropdown-menu
              slot="dropdown"
              style="width: 150px; text-align: center"
            >
              <el-dropdown-item icon="el-icon-s-custom"
                >首页门户</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-office-building"
                >商家入驻</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-setting"
                >商家后台</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-switch-button"
                ><span>退出登录</span></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div> -->
    <nav-bar></nav-bar>
    <div class="content">
      <div class="contain">
        <div class="box mt20px">
          <div class="el-row">
            <div class="el-col el-col-1">
              <div class="label">分类</div>
            </div>
            <div class="el-col el-col-23">
              <ul class="typeList  clearfix">
                <li class="typeItem active">不限</li>
                <li class="typeItem">小吃</li>
                <li class="typeItem">自助餐</li>
                <li class="typeItem">西餐</li>
                <li class="typeItem">火锅</li>
                <li class="typeItem">日式料理</li>
                <li class="typeItem">包子粥铺</li>
                <li class="typeItem">酒店宴席</li>
              </ul>
            </div>
          </div>
          <div class="mt10px">
            <div class="el-row">
              <div class="el-col el-col-1">
                <div class="label">区域</div>
              </div>
              <div class="el-col el-col-23">
                <ul class="typeList clearfix">
                  <li class="typeItem active">不限</li>
                  <li class="typeItem ">和平区</li>
                  <li class="typeItem">城中区</li>
                  <li class="typeItem">鱼峰区</li>
                  <li class="typeItem">柳南区</li>
                  <li class="typeItem">柳北区</li>
                  <li class="typeItem">柳城县</li>
                  <li class="typeItem">三江侗族自治县</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="mt20px">
          <div class="el-row" style="margin-left: -10px; margin-right: -10px;">
            <div
              class="el-col el-col-20"
              style="padding-left: 10px; padding-right: 10px;"
            >
              <ul class="shopList">
                <li class="shopItem">
                  <div class="shopLeft"></div>
                  <div class="shopCenter">
                    <div class="shopTitle">123456</div>
                    <div class="shopDes">
                      包子粥铺 | 和平区 广西壮族自治区柳州市鱼峰区西江路42号附近
                    </div>
                    <div class="shopDes">推荐菜：无</div>
                    <div class="shopDes">
                      人&nbsp;&nbsp;&nbsp;&nbsp;均：<span
                        data-v-115aed42=""
                        class="shopPrice"
                        >￥18.00</span
                      >
                    </div>
                    <div class="mt10px fz14px">
                      已有 0 人就餐
                    </div>
                  </div>
                  <div class="shopTime">
                    <p>休息中</p>
                  </div>
                  <div class="shopRight text-right">
                    <div class="mapBox">
                      <i class="el-icon-location"></i>
                      <span>地图</span>
                    </div>
                  </div>
                </li>
              </ul>
              <div class="mt20px text-right"></div>
            </div>

            <div
              class="el-col el-col-4"
              style="padding-left: 10px; padding-right: 10px;"
            >
              <div class="box">
                <div class="mb10px">大家都在吃</div>
                <ul class="recommendedList">
                  <li class="recommendedItem">
                    <div class="myImg"></div>
                    <div class="recommendedShopTitle">
                      锦桂楼美食（合作餐厅）
                    </div>
                    <div class="recommendedDes clearfix">
                      <div class="fl">鱼峰区</div>
                      <div class="recommePrice fr">
                        ￥10.00
                      </div>
                    </div>
                  </li>

                  <li class="recommendedItem">
                    <div class="myImg"></div>
                    <div class="recommendedShopTitle">
                      锦桂楼美食（合作餐厅）
                    </div>
                    <div class="recommendedDes clearfix">
                      <div class="fl">鱼峰区</div>
                      <div class="recommePrice fr">
                        ￥10.00
                      </div>
                    </div>
                  </li>

                  <li class="recommendedItem">
                    <div class="myImg"></div>
                    <div class="recommendedShopTitle">
                      锦桂楼美食（合作餐厅）
                    </div>
                    <div class="recommendedDes clearfix">
                      <div class="fl">鱼峰区</div>
                      <div class="recommePrice fr">
                        ￥10.00
                      </div>
                    </div>
                  </li>

                  <li class="recommendedItem">
                    <div class="myImg"></div>
                    <div class="recommendedShopTitle">
                      锦桂楼美食（合作餐厅）
                    </div>
                    <div class="recommendedDes clearfix">
                      <div class="fl">鱼峰区</div>
                      <div class="recommePrice fr">
                        ￥10.00
                      </div>
                    </div>
                  </li>

                  <li class="recommendedItem">
                    <div class="myImg"></div>
                    <div class="recommendedShopTitle">
                      锦桂楼美食（合作餐厅）
                    </div>
                    <div class="recommendedDes clearfix">
                      <div class="fl">鱼峰区</div>
                      <div class="recommePrice fr">
                        ￥10.00
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "../components/nav-bar";
export default {
  name: "",
  data() {
    return {};
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  components: {
    "nav-bar": NavBar
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
@import url(./mainPage);
</style>
